import echarts from "echarts";
import resize from "@/components/charts/mixins/resize";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
import request from "@/utils/request";

export default {
  mixins: [resize],
  props: {
    title: { type: String, default: "" },
    dataType: { type: String, default: "static" },
    propsApi: { type: String, default: "" },
    option: { type: Object, default: () => {} },
    dataObj: { type: Object, default: () => {} },
    inPage: { type: String, default: "home" },
    searchForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chart: null,
      currOption: {},
      isEmpty: false,
    };
  },
  mounted() {
    console.log(this.option, this.dataObj, "======");
    this.getData();
  },
  watch: {
    option: {
      handler(val) {
        this.currOption = val;
        this.resetChart();
      },
      deep: true,
    },
    dataType(val) {
      if (val !== "dynamic") {
        this.currOption = this.option;
        this.resetChart();
      }
    },
    propsApi(val) {
      if (this.dataType === "static") return;
      if (!val) return;
      getDataInterfaceRes(val).then((res) => {
        this.currOption = res.data;
        this.resetChart();
      });
    },
  },
  methods: {
    getData() {
      console.log("this.dataObj----------------1", this.dataObj);
      if (this.dataObj && this.dataObj.dataType == "service") {
        for (const key in this.searchForm) {
          console.log(key);
          this.dataObj.requestParam[key] = this.searchForm[key];
        }
        request({
          url: this.dataObj.interfaceUrl,
          method: this.dataObj.customUrlPostType,
          data: this.dataObj.requestParam
            ? JSON.parse(this.dataObj.requestParam)
            : {},
        }).then((res) => {
          let handleFn = eval(this.dataObj.dataProcessing);
          let handleData = handleFn(res.data);
          let dataItem = {
            name: "",
            type: "bar",
            barMaxWidth: 20,
            data: [],
            itemStyle: {
              barBorderRadius: [4, 4, 4, 4],
            },
          };

          if (this.dataObj.keyName == "barChart") {
            this.dataObj.option.xAxis[0].data = handleData.xData;
            this.dataObj.option.series = [];
            handleData.dataList.forEach((item) => {
              let data = JSON.parse(JSON.stringify(dataItem));
              data.data = item.data;
              data.name = item.name;
              this.dataObj.option.series.push(data);
            });
          } else if (this.dataObj.keyName == "lineChart") {
            this.dataObj.option.xAxis.data = handleData.xData;
            this.dataObj.option.series = [];
            console.log(handleData, "21111111111111");
            this.dataObj.option.series = [];
            handleData.dataList.forEach((item) => {
              let data = JSON.parse(JSON.stringify(dataItem));
              data.data = item.data;
              data.type = "line";
              data.name = item.name;
              data.smooth = true;
              this.dataObj.option.series.push(data);
            });
          } else if (this.dataObj.keyName == "annularChart") {
            this.dataObj.option.legend.data = handleData.xData;
            this.dataObj.option.series[0].data = handleData.dataList;
          } else if (this.dataObj.keyName == "radarChart") {
            console.log(handleData, "_________________________-");
            this.dataObj.option.radar.indicator = handleData.xData;
            let txt = "";
            this.dataObj.option.series[0].data = [];
            this.dataObj.option.legend.data = [];
            handleData.dataList.forEach((item, index) => {
              // this.dataObj.option.legend.data.push(item.name)
              this.dataObj.option.series[0].data.push({
                name: item.name,
                value: item.value,
                itemStyle: {
                  color: "#4096ff",
                },
              });
              txt = txt + "  vs  " + item.name;
            });
            this.dataObj.option.series[0].name = txt;
            console.log(
              this.dataObj.option,
              "this.dataObj.option------------------"
            );
          }
          if (this.inPage == "home") {
            this.dataObj.option.legend.formatter = function (name) {
              return name.length > 5 ? name.substr(0, 5) + "..." : name;
            };
          } else {
            this.dataObj.option.legend.formatter = function (name) {
              return name.length > 4 ? name.substr(0, 4) + "..." : name;
            };
          }
        });
      } else if (this.dataType === "dynamic") {
        if (!this.propsApi) return;
        getDataInterfaceRes(this.propsApi).then((res) => {
          let data = res.data.data;
          if (this.inPage == "home") {
            data.legend.formatter = function (name) {
              return name.length > 5 ? name.substr(0, 5) + "..." : name;
            };
          } else {
            data.legend.formatter = function (name) {
              return name.length > 4 ? name.substr(0, 4) + "..." : name;
            };
          }

          this.currOption = data;
          this.resetChart();
        });
      } else {
        if (this.inPage == "home") {
          this.option.legend.formatter = function (name) {
            return name.length > 5 ? name.substr(0, 5) + "..." : name;
          };
        } else {
          this.option.legend.formatter = function (name) {
            return name.length > 4 ? name.substr(0, 4) + "..." : name;
          };
        }
        this.currOption = this.option;
        this.initChart();
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption(this.currOption);
      setTimeout(() => {
        this.$nextTick(() => {
          this.chart.resize();
        });
      }, 50);
    },
    resetChart() {
      this.isEmpty = JSON.stringify(this.currOption) === "{}";
      this.chart && this.chart.dispose();
      this.chart = null;
      if (!this.isEmpty) this.initChart();
    },
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
};
